<template>
    <view>
      <!-- 导航栏公告/任务 -->
      <view class="topBar-box">
        <view :class="{'announcement':true,'active':show===1}" @click="show=1">公告</view>
        <view :class="{'task':true,'active':show===2}" @click="show=2">系统通知</view>
      </view>
        <!-- 没有消息的情况 -->
      <block v-if="show===1" class="announcement-box">
        <block v-if="accList.length===0">
          <view class="empty-box">
          <text>暂无消息</text>
          </view>
        </block>
        
        
        
        
       </block>
      <!-- 有任务的情况 -->
      <block v-if="show===2" class="task-box">
        <view class="icon-box">
        <text class="icon">@</text>
        <text>全部已读</text>
      </view>
      <!-- 任务列表 -->
      <view class="taskList-box">
        <view class="taskList-item">
          <view class="title">您有新的运输任务</view>
          <view class="text">
            <text>运输车辆: 京A 12345</text>
            <text class="route">运输路线: 北京--广州</text>
          </view>
          <view class="time-box" id="time-box">
            <text class="time" style="color: #8a8a8a;">2023-03-06 10:06:02</text>
            <view class="detail"><button class="mini-btn" type="warn"  plain size="mini">查看详情</button></view>
          </view>
        </view>
         </view>
      </block>
    </view>

</template>

<script>
  export default {
     name: "",
      components: {},
      data() {
        return {
          // 导航栏显示与隐藏
          show: 1,
          // 公告数组列表
          accList:[],
          // 公告相关数据
          annData:{
            contentType:200,
            page:1,
            pageSize:10
          },
          // 任务通知相关数据
          taskData:{
            contentType:201,
            page:1,
            pageSize:10
          }
        };
      },
      watch:{
        show:{
          handler(value){
          },
          immediate:true
        }
      },
      created() {},
      mounted() {},
      onLoad() {
        this.getAnnList()
      },
      methods: {
        // 请求公告列表的方法
       async getAnnList(){
          const res = await uni.$http.get('/messages/page',{
            contentType:201,
            page:1,
            pageSize:10
          })
          console.log(res.data.data.item)
        }
    
      },
      onShow() {
        uni.setTabBarBadge({
          index: 1,
          text: "1",
        });
      },
  }
</script>

<style lang="scss">
  .topBar-box {
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 75px;
    .announcement,
    .task {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      height: 30px;
      font-size: 14px;
      color: #333333;
    }
    
    .active {
      &::after {
        content: "";
        display: block;
        width: 20px;
        height: 2px;
        background-color: red;
      }
    }
  }
  .empty-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 155px;
   img{
    width: 200px;
    height: 120px;
    margin-bottom: 10px;
   }
   text{
    color: #818181;
   }
  }
  .icon-box {
    height: 55px;
    display: flex;
    align-items: center;
    padding-left: 17px;
    color: #818181;
    background-color: #f5f5f5;
    .icon {
      margin-right: 5px;
      font-size: 14px;
    }
  }
  .annList-box {
    .annList {
      
      .ann-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        padding: 0 22px;
        .content {
          width: 240px;
          
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 14px;
         
        }
        .noRead{
          &::before {
            content: "";
            display: inline-block;
            width: 6px;
            height: 6px;
            background-color: red;
            border-radius: 50%;
            margin-right: 5px;
          }
        }
        .time {
          font-size: 12px;
          color: #818181;
        }
      }
    }
  }
  .taskList-box{
    padding: 0 13px;
    background-color: #f5f5f5;
    .taskList-item{
      box-sizing: border-box;
      width: 348px;
      height: 154px;
      padding: 16px 16px 28px;
      background-color: #fff;
    
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 14px;
      .title{
        font-size: 14px;
     
        &::after {
          content: "";
          display: inline-block;
          width: 6px;
          height: 6px;
          background-color: red;
          border-radius: 50%;
          margin-left: 5px;
        }
      }
      .text{
        display: flex;
        justify-content: space-between;
        color: #818181;
        .route{
          width: 151px;
       
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .time-box{
        display: flex;
        justify-content: space-between;
     
        align-items: center;
        .detail{
          display: flex;
          align-items: center; 
          .mini-btn{
          font-size: 12px;
          border-radius: 15px;
        }
        }
      }
    }
  }

</style>
